<!--页面组件-->
<template>
    
  <div>
    <!-- <div class="bgcolor"> -->
    <div style class="legendBox">
      <!--图例@start-->
      <div class="legendCon">
        <ul>
          <li>
            <em style="background: #67b9a5"></em>
            <!-- <span>成功</span> -->
            <span>检索区域</span>
          </li>
          <li>
            <em style="background: #c11113"></em>
            <!-- <span>失败</span> -->
            <span>覆盖区域</span>
          </li>
          <!-- <li>
                            <em style="background: #B0B4B9;"></em>
                            <span>待执行</span>
                         </li> -->
          <li>
            <em style="background: #4d7bd7"></em>
            <!-- <span>执行中</span> -->
            <span>当前结果</span>
          </li>
        </ul>
      </div>
      <!--图例@end-->
    </div>
    <!-- </div> -->
  </div>
</template>


<!--js代码-->
<script>
export default {
  name: "Dashboard",
  props: {},
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {},
};
</script>


<!--css样式-->
<style scoped>
.bgcolor {
  background-color: rgba(0, 0, 0, 0.4);
  height: 200px;
  width: 200px;
}
/*图例@start*/
.legendBox {
  position: absolute;
  /* left:30px; */
  /* top:121px */
}
.legendBox .legendCon {
  position: absolute;
  width: 118px;
  background: rgba(255, 255, 255, 0.6);
  z-index: 100;
  border-radius: 3px;
  border: none;
}
.legendBox .legendCon ul {
  padding-left: 0;
  margin-top: 5px;
  margin-bottom: 5px;
}

.legendBox .legendCon ul li {
  list-style-type: none;
  line-height: 24px;
  color: rgba(0, 0, 0, 0.8);
  padding-left: 15px;
  font-size: 12px;
}
.legendBox .legendCon ul li em {
  width: 10px;
  height: 10px;
  line-height: 10px;
  margin-right: 15px;
  /* border-radius: 5px; */
}

.legendBox .legendCon ul li em,
.legendBox .legendCon ul li span {
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
}
/*图例@end*/
</style>